<template>
  <div class="location-test">
    <h3>LocationStatus 组件测试</h3>
    
    <div class="test-section">
      <h4>1. GPS定位成功状态</h4>
      <LocationStatus
        :location="gpsLocation"
        :loading="false"
        :error="null"
        @refresh="handleRefresh"
      />
    </div>

    <div class="test-section">
      <h4>2. IP定位状态</h4>
      <LocationStatus
        :location="ipLocation"
        :loading="false"
        :error="null"
        @refresh="handleRefresh"
      />
    </div>

    <div class="test-section">
      <h4>3. 定位中状态</h4>
      <LocationStatus
        :location="null"
        :loading="true"
        :error="null"
        @refresh="handleRefresh"
      />
    </div>

    <div class="test-section">
      <h4>4. 权限被拒绝错误</h4>
      <LocationStatus
        :location="null"
        :loading="false"
        :error="permissionError"
        @refresh="handleRefresh"
      />
    </div>

    <div class="test-section">
      <h4>5. GPS信号不可用错误</h4>
      <LocationStatus
        :location="null"
        :loading="false"
        :error="gpsError"
        @refresh="handleRefresh"
      />
    </div>

    <div class="test-section">
      <h4>6. 定位超时错误</h4>
      <LocationStatus
        :location="null"
        :loading="false"
        :error="timeoutError"
        @refresh="handleRefresh"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LocationStatus from './LocationStatus.vue'

// 测试数据
const gpsLocation = ref({
  city: '北京',
  province: '北京市',
  country: '中国',
  latitude: 39.9042,
  longitude: 116.4074,
  address: '北京市朝阳区',
  source: 'gps',
  accuracy: 15,
  timestamp: Date.now()
})

const ipLocation = ref({
  city: '上海',
  province: '上海市',
  country: '中国',
  latitude: 31.2304,
  longitude: 121.4737,
  address: '上海市浦东新区',
  source: 'ip',
  timestamp: Date.now()
})

const permissionError = ref({
  code: 1,
  message: 'User denied the request for Geolocation.'
})

const gpsError = ref({
  code: 2,
  message: 'Position unavailable.'
})

const timeoutError = ref({
  code: 3,
  message: 'Timeout expired.'
})

const handleRefresh = () => {
  console.log('刷新位置被点击')
}
</script>

<style scoped>
.location-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.test-section h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
}

h3 {
  text-align: center;
  color: #409eff;
  margin-bottom: 30px;
}
</style>
